<template>
    <div>
        <a-modal
            :visible="handleModalVisible"
            :title="passObj.title"
            :maskClosable="false"
            :closable="true"
            :destroyOnClose="true"
            width="80%"
            :dialog-style="{ margin: '0 auto'}"
            wrapClassName=""
            @cancel="closeVisible"
            >
            <template slot="footer">
                <a-button @click="closeVisible">
                    取消
                </a-button>
                <a-button class="blue-btn" @click="onSubmit">
                    提交
                </a-button>
            </template>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                layout="inline"
                class="internalControl-modal-form"
            >
                <a-form-model-item label="预算项目名称" prop="fysxmmc">
                    <a-input v-model="form.fysxmmc"/>
                </a-form-model-item>
                <!-- <a-form-model-item label="预算指标状态" prop="fyszbzt">
                    <a-select v-model="form.fyszbzt">
                        <a-select-option value="收回">
                            收回
                        </a-select-option>
                        <a-select-option value="启用">
                            启用
                        </a-select-option>
                        <a-select-option value="停用">
                            停用
                        </a-select-option>
                    </a-select>
                </a-form-model-item> -->
                <a-form-model-item label="预算部门" prop="fbmid">
                    <a-select v-model="form.fbmid">
                        <a-select-option v-for="(item,index) in buMenList" :key="index" :value="item.id" @click="bumenChange(item.orgName)">
                            {{ item.orgName }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="指标摘要" prop="fzbzy">
                    <a-input v-model="form.fzbzy"/>
                </a-form-model-item>
                <a-form-model-item label="拆分金额" prop="fzzb">
                    <a-input-number :min="1" v-model="form.fzzb" @change="fzzbChange(form.fzzb)" style="width:100%"/>
                </a-form-model-item>
                <!-- <a-form-model-item label="已支付金额" prop="fyzfje">
                    <a-input v-model="form.fyzfje"/>
                </a-form-model-item> -->
                <!-- <a-form-model-item label="指标结余" prop="fzbjy">
                    <a-input-number v-model="form.fzbjy" style="width:100%"/>
                </a-form-model-item> -->
                <!-- <a-form-model-item label="支出进度" prop="fzcjd">
                    <a-input v-model="form.fzcjd"/>
                </a-form-model-item> -->
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector'
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio, } from '@/components/compSearchCriteria/ContractType'
import {} from '@/components/compSearchCriteria/ContractType'
import { selectypjddepart,cfyszbtz, } from './service/index'
import moment from 'moment'
export default {
    props:{
        passObj:{
            type:[Array,Object],
            default: () => {},
            required:false
        },
    },
    components:{
        compSelector
    },
    data() {
        return {
            moment:moment,
            handleModalVisible: false,
            kongForm: {},
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
            typeSelect:typeSelect,
            form: {
                fbm: "",
                fbmid: "",
                ftzid: "",
                fysxmmc: "",
                fyszbzt: "启用",
                fyzfje: 0,
                fzbjy: 0,
                fzbzy: "",
                fzcjd: '0.00',
                fzzb: null,
                // id: "",
            },
            maxNumber: 0,
            rules: {
                fysxmmc: [{ required: true, message: '请输入预算项目名称', trigger: 'blur' }],
                // fyszbzt: [{ required: true, message: '请选择是否已拆分', trigger: 'change' }],
                fbmid: [{ required: true, message: '请选择预算部门', trigger: 'change' }],
                // fyzfje: [{ required: true, message: '请输入已支付金额', trigger: 'blur' }],
                fzzb: [{ required: true, message: '请输入总指标', trigger: 'blur' }],
            },
            buMenList: [],
        }
    },
    created() {
    },
    watch: {
        passObj(newval,oldVal){
            //console.log(newval)
            if(newval.valueData){
                this.form.ftzid = newval.valueData.id
                this.form.fysxmmc = newval.valueData.fysxmmc
                this.form.fzbzy = newval.valueData.fzbzy
                this.maxNumber = newval.valueData.fzbjy
            }
        },
    },
    mounted(){
        this.getBumenData()
        this.kongForm = JSON.parse(JSON.stringify(this.form))
    },
    methods: {
        // 右上角关闭后的回调
        closeVisible(e){
            this.handleModalVisible = false
            this.form = this.kongForm
            this.$refs.ruleForm.resetFields();
        },
        clearVisible(e){
            this.$emit('success')
            this.handleModalVisible = false
            this.form = this.kongForm
            this.$refs.ruleForm.resetFields();
        },
        getBumenData(){
            selectypjddepart().then(res => {
                //console.log(res)
                this.buMenList = res.result
            })
        },
        // 填写总指标
        fzzbChange(val){
            // this.form.fzbjy = val
            if(this.maxNumber && val > this.maxNumber){
                this.$message.warning('当前可拆分余额为'+this.maxNumber+',拆分金额需小于'+this.maxNumber)
                this.form.fzzb = null
                // this.form.fzbjy = null
            }
        },
        //
        bumenChange(val){
            //console.log(val)
            this.form.fbm = val
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let data = this.form
                    cfyszbtz(data).then(res => {
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.clearVisible()
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>
<style>
    @import url('../../css/internal-control.css');
</style>
